<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./index.css">
</head>
<body>
  <div class="loading_box">
    <div class="loading_box_body">
      <div class="loading_box_body_top absolute">
        <div class="circle"></div>
        <div class="rect"></div>
        <!-- <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="50" height="80">
          <circle cx="25" cy="25" r="25"></circle>
          <rect width="3" height="30" x="25" y="50" fill="#9a9a9a"></rect>
        </svg> -->
      </div>
      <img src="./head.png" alt="">
      <!-- 80 180 -->
      <div class="loading_box_body_circle">
        <div class="circle_loading"></div>
        <!-- <svg viewBox="25 25 50 50" class="circle_svg">
          <circle cx="50" cy="50" r="20"></circle>
        </svg> -->
      </div>
      <div class="loading_box_body_eye">
        <div class="relative loading_box_body_eye_wrapper">
          <img src="./eye.png" alt="" class="left_eye absolute">
          <img src="./eye.png" alt="" class="right_eye absolute">
          <img src="./mouth.png" alt="" class="center_mouth absolute">
        </div>
      </div>
    </div>
    <div class="loading_box_leftHand">
      <img src="./palms.png" alt="">
    </div>
    <div class="loading_box_rightHand_TopWrapper absolute">
      <div class="relative">
        <div class="loading_box_rightHand">
          <img src="./fingerprint-2.png" alt="">
        </div>
        <div class="loading_box_right_bigHandwrapper">
          <img src="./fingerprint.png" alt="" class="loading_box_right_bigHand">
        </div>
      </div>
    </div>
    <div class="loading_box_rightHand_bottom absolute">
      <img src="./fingerprint-3.png" alt="">
    </div>
    <div class="loading_box_bottom_wrapper">
      <div class="circle"></div>
      
      <div class="bottom_wrapper_rotate">
        <div class="bottom_wrapper_rotate_wrapper">
          <div class="bottom_wrapper_rotate_circle"></div>
        </div>
        <!-- <svg class="circle_svg" width="250" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1">
          <g transform="skewX(20) skewY(0) scale(1, 0.5) translate(-20, 50)">
            <path 
                id="ellipsePath"
                d="M 200,50
                A 50,25 0 1,0 50,50
                A 50,25 0 1,0 200,50" 
                filter="url(#shadow_filter)" 
                fill="none" 
                stroke="black"/>
          </g>
            定义阴影滤镜
            <filter id="shadow_filter">
              <feDropShadow dx="5" dy="5" stdDeviation="3" flood-color="#eee" flood-opacity="1" />
            </filter>
        </svg> -->
      </div>
    </div>
    <div class="loading_box_sportsCircle">
      <div class="circleOne"></div>
      <div class="circleTwo"></div>
      <div class="circleThree"></div>
      <div class="circleFour"></div>
      <div class="circleFive"></div>
    </div>
  </div>
</body>
</html>
